<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import warningCircle from "@/assets/images/BasicConfig/BannerConfig/warning-circle.png";
import { stateList } from "@/utils/constClass.js";
import { queryPageEnterpriseUserMgmtAudit } from "@/api/User/Worker.js";
import { exportFile } from "@/utils/common";
const tableLoading = ref(false);
const seachTableRef = ref();
const router = useRouter();
const formInlines = ref();
const instance = getCurrentInstance()
const formInline = ref([
  {
    type: "input",
    prop: "nameOrPhone",
    placeholder: "员工姓名/手机号",
    label: "",
    model: "",
  },
  {
    type: "input",
    prop: "storeName",
    placeholder: "门店名称",
    label: "",
    model: "",
  },
  {
    type: "select",
    placeholder: "状态",
    label: "",
    width: "180px",
    prop: "auditStatus",
    data: stateList,
    model: [],
  },
  {
    type: "datePicker",
    prop: ["createTimeStart", "createTimeEnd"],
    startPlaceholder: "创建开始时间",
    endPlaceholder: "创建结束时间",
    label: "",
    model: [],
  },
]);
const btnLefts = ref([
  // {
  //   label: "导出",
  //   plain: false,
  //   show: true,
  //   img: new URL("@/assets/icon/btn-export.png", import.meta.url),
  //   style: "border-color:#0C268C;color:#0C268C",
  //   click: async () => {
  //     btnLefts.value[0].loading = true;
  //     exportFile(
  //       "/jy-system/enterprise/user/mgmt/exportEnterpriseUser",
  //       "post",
  //       "人员审核",
  //       {},
  //       { ...formInlines.value, page: { size: 9999999, current: 1 } }
  //     )
  //       .then((res) => {
  //         ElMessage.success(res);
  //       })
  //       .catch(() => {
  //         ElMessage.error(res);
  //       })
  //       .finally(() => {
  //         btnLefts.value[0].loading = false;
  //       });
  //   },
  // },
]);
const tableConfig = ref([
  {
    prop: "employeeName",
    label: "员工姓名",
    minWidth: "120",
  },
  {
    prop: "storeName",
    label: "门店名称",
    minWidth: "150",
  },
  {
    prop: "userPhone",
    label: "手机号码",
    width: "120",
  },
  {
    prop: "roleName",
    label: "角色",
    width: "100",
  },
  {
    prop: "submitTime",
    label: "提交时间",
    width: "250",
  },
  {
    prop: "auditStatus",
    label: "状态",
    type: "slot",
    slotName: "auditStatus",
    width: "120",
  },
  {
    prop: "auditTime",
    label: "审核时间",
    width: "250",
  },
  {
    prop: "auditMemberName",
    label: "审核人",
    width: "100",
  },
  {
    type: "action",
    label: "操作",
    width: 100,
    btns: [
      {
        label: () => "审核",
        type: "warning",
        show: (row) => {
          return !row.auditStatus;
        },
        click: async (row) => {
          router.push({
            name: "workerChildManageInfos",
            query: { uuid: row.id, type: "1" },
          });
        },
      },
      {
        label: () => "详情",
        type: "primary",
        show: (row) => {
          return row.auditStatus;
        },
        click: async (row) => {
          router.push({
            name: "workerChildManageInfos",
            query: { uuid: row.id, type: row.auditStatus == 1 ? "2" : "3" },
          });
        },
      },
    ],
  },
]);

const totalPage = ref(0);
const tableData = ref([]);

const handlerSearch = async (formInline) => {
  formInlines.value = formInline;
  tableLoading.value = true;
  try {
    const { records, total } = await queryPageEnterpriseUserMgmtAudit(
      formInline
    );
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};
onActivated(()=>{
  seachTableRef.value.handlerSearch()
})
</script>

<template>
  <div class="page-content">
    <SeachTable
      :tableType="1"
      ref="seachTableRef"
      :forms="formInline"
      :btnLefts="btnLefts"
      :noResetTable="true"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      @handlerSearch="handlerSearch"
    >
      <template #auditStatus="{ row }">
        <div class="flex align-items-center">
          {{
            stateList.find((v) => v.value == Number(row.auditStatus))?.label ||
            "-"
          }}
          <el-tooltip
            v-if="row.auditStatus == 2"
            placement="top"
            effect="dark"
            trigger="hover"
            :content="row.auditResult"
          >
            <img class="tipClass" :src="warningCircle" />
          </el-tooltip>
        </div>
      </template>
    </SeachTable>
  </div>
</template>

<style lang="less" scoped>
.tipClass {
  height: 14px;
  width: 14px;
  margin-left: 4px;
}
</style>
